<template>
  <div class="login-container">
    <q-card class="login-card q-pa-lg">
      <q-card-section class="text-center">
        <div class="text-h4 text-weight-bold q-mb-md">登录</div>
        <div class="text-subtitle1 text-grey-7">欢迎回到您的博客空间</div>
      </q-card-section>

      <q-separator class="q-my-md" />

      <q-card-section>
        <q-form @submit="onSubmit" class="q-gutter-md">
          <q-input
            v-model="form.username"
            label="用户名或邮箱"
            outlined
            :rules="[val => !!val || '请输入用户名或邮箱']"
          >
            <template v-slot:prepend>
              <q-icon name="person" />
            </template>
          </q-input>

          <q-input
            v-model="form.password"
            label="密码"
            :type="isPwd ? 'password' : 'text'"
            outlined
            :rules="[val => !!val || '请输入密码']"
          >
            <template v-slot:prepend>
              <q-icon name="lock" />
            </template>
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>

          <div class="row justify-between items-center q-mt-sm">
            <q-checkbox v-model="form.remember" label="记住我" color="primary" />
            <q-btn
              flat
              color="primary"
              label="忘记密码？"
              class="no-caps"
              size="sm"
              to="/forgot-password"
            />
          </div>

          <div class="q-mt-lg">
            <q-btn
              type="submit"
              color="primary"
              label="登录"
              class="full-width"
              :loading="isSubmitting"
              size="lg"
            />
          </div>
        </q-form>
      </q-card-section>

      <q-separator class="q-my-md" />

      <q-card-section class="text-center">
        <div class="text-subtitle1 q-mb-md">其他登录方式</div>
        <div class="row justify-center q-gutter-md">
          <q-btn round color="red" icon="fab fa-weibo" />
          <q-btn round color="green" icon="fab fa-wechat" />
          <q-btn round color="blue" icon="fab fa-qq" />
        </div>
      </q-card-section>

      <q-card-section class="text-center q-pt-none">
        <div class="q-mt-md">
          还没有账号？ 
          <q-btn flat color="primary" label="立即注册" class="no-caps" to="/register" />
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'

const router = useRouter()
const $q = useQuasar()

const isPwd = ref(true)
const isSubmitting = ref(false)

const form = ref({
  username: '',
  password: '',
  remember: false
})

const onSubmit = () => {
  if (!form.value.username || !form.value.password) return

  isSubmitting.value = true

  // 模拟登录请求
  setTimeout(() => {
    // 在实际应用中，这里应该是一个真实的 API 请求
    const mockUser = {
      id: 1,
      username: 'admin',
      name: '张三',
      avatar: '/pic/1.webp'
    }

    // 保存用户信息到 localStorage 或 state 管理
    localStorage.setItem('user', JSON.stringify(mockUser))
    
    isSubmitting.value = false
    
    // 显示登录成功通知
    $q.notify({
      message: '登录成功！',
      color: 'positive',
      icon: 'check_circle',
      position: 'top'
    })

    // 跳转到首页或之前的页面
    router.push('/')
  }, 1500)
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  min-height: 80vh;
}

.login-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
}

@media (max-width: 600px) {
  .login-container {
    padding: 20px 16px;
  }
}
</style> 